<template>
  <el-main class="e-m-4">
    <div>
      <el-row class="e-m-row">


        <el-col :span="12" class="e-m-text">
          <div class="e-m-h1">


            <h1 >
              {{title}}
            </h1>
            <p>
              {{text}}
            </p>
          </div>
        </el-col>

        <div>
          <el-col :span="12" class="e-m-img">

            <img :src="img" alt="">

          </el-col>
        </div>


      </el-row>
    </div>
  </el-main>
</template>

<script>
  export default {
    name: "ContentThird",
    data(){
      return{
        img: 'https://bianke.cnki.net/resources/images/dachengForum/dcjt_bg3.jpg',
        title: '多样的讲座应用场景',
        text: '课堂实录、习题讲解、专题讲座、经典诵读、作品讲评有料你就讲出来'
      }
    }
  }
</script>

<style scoped>

  .e-m-4 {
    background-color: rgb(98, 186, 226);
  }
  .e-m-4 .e-m-img img{
    padding-right: 400px;
  }
  .e-m-4 .e-m-row .e-m-text {
    position: relative;
  }
  .e-m-4 .e-m-row .e-m-text .e-m-h1 {
    color: white;
    position: relative;
    width: 600px;
    margin-left: 260px;
  }
  .e-m-4 .e-m-row .e-m-text .e-m-h1 h1 {
    width: 600px;
    padding-left: 100px;
  }
  .e-m-4 .e-m-row .e-m-text .e-m-h1 p {
    display: block;
    padding-left: 52px;
  }


</style>
